<template>
  <div>
      <!-- 头部返回按钮 -->
      <div class="header">
        <div class="text" @click="okk">
         <i class="iconfont icon-back"></i>
         <span class="text1">
          <i class="iconfont icon-fanhui"></i>
          预定护工
          </span>
        </div>
      </div>

      <!-- 说明 -->
      <div class="introduce">
        <div class="one">护工服务</div>
        <div class="two">服务时间:{{mm}}月{{dd}}日{{door_time}}</div>
      </div>

      <div class="transit"></div>

      <div class="book-info">
        <mt-field label="预定人" placeholder="请输入预定人" v-model="form.user_name"></mt-field>
        <mt-field label="联系手机" placeholder="请输入联系手机" v-model="form.phone"></mt-field>
        <mt-field label="上门地址" placeholder="请输入上门地址" v-model="form.address"></mt-field>
        <mt-field label="其他要求" placeholder="备注" rows="1" v-model="form.remark"></mt-field>
      </div>
      <!-- 下拉框？？ -->
      <!-- 常规体检 -->
      <!-- 测血压 -->

        <!-- 静态页面 -->
        <div class="youhui">
          <!-- 上 -->
          <div class="up-juan">
            <i class="iconfont icon-wodeyouhuijuan"></i>
            <span class="text001">抵用券  暂无抵用券可使用</span>
          </div>
          <!-- 下 -->
            <div class="down-huodong">
            <i class="iconfont icon-shijian1"></i>
            <span class="text001">优惠活动  优惠活动还未开始</span>
            </div>
      </div>

       <!--退出登录 -->
      <div class="confirmButton">
          <mt-button class="but" type="plain" size="large" @click="confirmBook">确认预定</mt-button>
      </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      door_time: this.$route.params.door_time,
      mm: localStorage.getItem('mm'),
      dd: localStorage.getItem('dd'),
      form: {
        user_name: '',
        phone: '',
        user_id: this.$store.getters['user/id'],
        hugong_id: this.$route.params.id,
        remark: '',
        address: ''
      }
    }
  },
  created () {

  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    confirmBook () {
      console.log(this.form)
      if (this.form.user_id === this.form.hugong_id) {
        Toast({
          message: '不能预约自己的服务！！',
          position: 'middle',
          duration: 3000
        })
      } else {
        this.$http.post('/saveReservation', this.form).then(res => {
          console.log(res.data)
          if (res.data.code === '1') {
            Toast({
              message: '预约成功',
              position: 'middle',
              duration: 3000
            })
            this.$router.push({
              name: 'index'
            })
          } else {
            Toast({
              message: '预约失败',
              position: 'middle',
              duration: 3000
            })
          }
        })
      }

      // this.$router.push({
      //   name: 'order'
      // })
    }
  }
}
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:rgb(255, 204, 153);
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
.introduce{
  text-align: center;
  border-bottom: 0.02rem solid gray;
}
.introduce .one{
  margin-top:3%;
  font-size: 0.5rem;
  margin-bottom: 2%;
  /* font-weight: bold; */
}
.introduce .two{
  margin-bottom: 2%;
  font-size: 0.4rem;
}
.transit{
  height: 8px;
  width: 100%;
  /* background:rgb(242, 242, 242); */
}
.book-info{
   border-bottom: 0.01rem solid gray;
}
.youhui{
  margin:5%;
  font-size: 0.4rem;
}
.youhui .iconfont{
  font-size: 0.55rem;
  color:rgb(255, 204, 153)
}
.youhui .up-juan{
  margin:3%

}
.youhui .down-huodong{
  margin:3%
}
.text001{
  margin-left: 3%;
}

/* 确认按钮 */
.confirmButton{
  display: flex;
  justify-content: center;
  width:90%;
  margin: 0.5rem;
  background: #96D596;
  color:#fff
}
.confirmButton .but{
  background: rgb(255, 204, 153);;
}
</style>
